<template>
  <view class="menu">
    <u-grid :border="false" col="4">
      <u-grid-item v-for="(listItem,listIndex) in list" :key="listItem.name" @click="click(listIndex)">
        <image class="icon" :src="listItem.icon"></image>
        <text class="grid-text">{{listItem.name}}</text>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
  export default {
    name: 'Menu',
    props: {
      list: Array
    },
    methods: {
      click(index) {
        this.$nav.to('/pages/category/category', {
          index
        })
      }
    }
  }
</script>

<style lang="scss">
  .menu {
    background-color: $me-color-card;
    border-radius: $uni-border-radius-lg;
  }

  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */

  }

  .icon {
    width: 100rpx;
    height: 100rpx;
  }
</style>
